<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP地址</th>
							<th>执行时间</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据加载中...</td>
					    </tr>
					    
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			      
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function () {
		// $("#pageId").load("doPageUI",function () {
		//     doGetObjects();
		// })
		//简写
		$("#pageId").load("doPageUI",doGetObjects());

		//按钮点击事件注册
		$(".input-group-btn")
				.on("click",".btn-search",doQueryObjects)
				.on("click",".btn-delete",doDeleteObjects);


		//基于tbody中checkbox状态，修改thead中checkbox状态
		$("#tbodyId").on("click",
				".cBox"
				, doChangTheadCheckBoxState);


		//基于thead中checkbox状态，修改tbody中checkbox状态
		$("#checkAll").click(doChangTbodyCheckBoxState);

	})
	function doChangTbodyCheckBoxState() {
		//1.获取全选checkbox状态
		var state=$(this).prop("checked");
		//2.修改tbody中ckeckbox的状态
		$("#tbodyId input[type='checkbox']")
				.each(function () {
					$(this).prop("checked",state)
				})
		//3.修改thead中checkbox的值
		/*$("#checkAll").prop("checked",flag);*/

	}
	function doChangTheadCheckBoxState() {
		//1.对应一个变量，做特定初始化值true
		var flag = true;
		//2.获取tbody中checkbox对象状态，并与flag进行逻辑与的操作
		$("#tbodyId input[type='checkbox']")
				.each(function () {
					flag=flag && $(this).prop("checked")
		})
		//3.修改thead中checkbox的值
		$("#checkAll").prop("checked",flag);


	}
	//删除后刷新页面的值
	function doSetPageCurrent() {
	var pageCount = $("#pageId").data("pageCount");
	var pageCurrent = $("#pageId").data("pageCurrent");
	var checkAll = $("#checkAll").prop("checked");
	//var checkAll = $("#checkAll").data("checkAll");
	if(pageCurrent==pageCount && checkAll && pageCurrent>1){
		pageCurrent--;
		$("#pageId").data("pageCurrent",pageCurrent);//查询百度页码值
	}
}

	//点击删除执行删除操作
	function doDeleteObjects() {

		//1.获取选中记录的chenkbox属性标签的id值进行校验
		var idArray=doGetCheckedIds();

		//console.log(idArray.toString())
		if(idArray.length==0){
			alert("至少选择一个！")
			return;
		}
		//如果选择点击取消，则不会执行之后的操作
		if(!confirm("确实是否删除？"))return;

		//2.根据请求参数
		var params={"ids":idArray.toString()}
		//3.根据请求的url
		var url="log/doDeleteObjects";
		//4.方式异步请求执行删除
		$.post(url,params,function (result) {
			if(result.state==1){
				doSetPageCurrent();//如果最后一页只剩一个数据，删除完成后需要刷新，而不是空数据
				doGetObjects() //刷新页面
			}else{
				alert(result.message)   //d如果不为0则弹出错误信息
			}
		})

	}
	//获取用户选中的记录id并存储到数组中
	function doGetCheckedIds(){
		//1.定义数组
		var idArray=[];
		//2.迭代所有的tbody中checkbox，将选中的存储到数组中
		$("#tbodyId input[type='checkbox']")
		.each(function () {
			//判断元素是否为空
			if($(this).prop("checked")){
				idArray.push($(this).val())
			}

		})
		//3.返回存储id的数组
		return idArray;
	}
	//基于用户名进行日志查询
	function doQueryObjects() {
//1.初始化当前页面的页码值
		$("#pageId").data("pageCurrent",1);
		//2.注册  基于用户名进行查询
		var username=$("#searchNameId").val();
		doGetObjects(username);
	//3.


	}
	//异步（底层启动工作线程）加载服务端日志数据
	function doGetObjects() {
		//每次查询钱都给全选按钮初始化值为false
		$("#checkAll").prop("checked",false);
		//1.定义请求参数
		var pageCurrent=$("#pageId").data("pageCurrent");
		console.log(pageCurrent);
		//判断语句所表述的意思是 当刚打开页面的情况下默认初始值为1
		//判断的pageCurrent在没有值的情况下，给他赋值为1
		if (!pageCurrent)pageCurrent=1;
		var params={"pageCurrent":pageCurrent};
		// debugger
		//基于用户名进行查询
		var uname=$("#searchNameId").val();
		// console.log("params",params);
		if (uname)params.username=uname;
		//2.定义请求url
		var url="log/doFindPageObjects";
		//3.发起异步请求加载日志数据
		//getJSON是jQuery中的函数，用于向服务器发起get请求，
		//将服务端返回的JSON串直接转换为JS对象
		//function (result) {}会在服务端响应到客户端以后执行
		$.getJSON(url,params,function (result) {
			console.log("result",result);
			//处理回调函数
			doHandleResponseResult(result);
		})
	}
	//处理服务端的相应结果
	function doHandleResponseResult(result) {//JsonResultVO
		if (result.state==1){
			//1.呈现日志记录，将数据呈现在页面上
			// console.log(result.data.records)
			console.log(result.data);
			//定义函数
			doSetTableBodyRows(result.data.records)
			doSetPagination(result.data);
		} else {
			alert(result.message);
		}
	}
	//将异步相应结果呈现在table的tbody位置
	function doSetTableBodyRows(records) {
		//1.获取tbody对象
		var tbody=$("#tbodyId");
		//清空之前记录
		tbody.empty();
		//2.迭代records记录，并将其内容追加到tbody
		for (var i in records){
			//2.1构建tr对象
			var tr=$("<tr></tr>");
			//2.2构建tds对象
			var tds=doCreateTds(records[i]);
			//2.3将tds追加到tr中
			tr.append(tds);
			//2.4将tr追加到tbody中
			tbody.append(tr);
		}
	}
	function doCreateTds(data) {
  	//创建每行的td元素，并填充具体业务数据
		var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"+
				"<td>"+data.username+"</td>"+
				"<td>"+data.operation+"</td>"+
				"<td>"+data.method+"</td>"+
				"<td>"+data.params+"</td>"+
				"<td>"+data.ip+"</td>"+
				"<td>"+data.time+"</td>";

		return tds;

	}
</script>











